/*
 * Copyright 2021 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "../../global/common";
@import "../../components/forms/forms";

$error-message-margin-bottom: 40px;
$input-length-for-rules: 300px;

@mixin header-icon($type, $color) {
  @include icon-before($type: $type, $color: $color, $size: 25px, $margin: 0) {
    text-align: center;
  }
  display: block;
}

@mixin key-pair-icon($type, $color) {
  @include icon-after($type: $type, $color: $color, $size: 15px, $margin: 0) {
    display: inline;
  }
}

.good-modification-icon {
  @include key-pair-icon($type: $fa-var-check, $color: $success-txt);
  margin-right: 10px;
}

.error-last-modification-icon {
  @include key-pair-icon($type: $fa-var-remove, $color: $failed);
  margin-right: 10px;
}

// TODO: Why unqualified tag selector? When webpack compiles production bundle,
// this rule is applied to every page. This doesn't happen in the development
// bundle. Qualifying this with a class (or nesting under a class) will prevent
// this side-effect.
code {
  white-space: pre-wrap;
  word-break:  break-all;
  word-wrap:   break-word;
}

.spinner-wrapper {
  @include spinner-for-modal;
}

.plugin-file-pattern-config-wrapper {
  margin-top: 20px;
}

@mixin fa-icon($type, $colors: $icon-light-color, $size: 5px) {
  @include icon-before($type: $type, $color: $colors, $size: 15px, $margin: 0) {
    display:      inline-block;
    margin-right: $size;
    @content
  }
  font-size: 11px;
}

.config-repo-success-state {
  @include fa-icon($type: $fa-var-check, $colors: $success-txt);
}

.config-repo-update-in-progress {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 5px;
  background: transparent url('../../../../app/assets/images/building.gif') repeat-x;
}

.material-config-wrapper {
  border-bottom: 1px solid $border-color;
}

.header-title {
  margin-right: 50px;
  width:        360px;
}

.header-title-text {
  font-size:  15px;
  max-width:  360px;
  margin:     0;
  word-break: break-all;
}

.header-title-url {
  font-size:  13px;
  display:    block;
  word-break: break-all;
}

.commit-info {
  font-size:  13px;
  word-break: break-all;
  max-width:  600px;
}

.committer {
  font-size:   13px;
  font-weight: 600;
}

.comment,
.committer-info {
  display:    block;
  word-break: break-all;
}

.parse-error-text {
  color: $failed;
}

.wrapper-for-search-box {
  display:      inline-block;
  margin-right: 10px;
}

.config-repo-properties {
  margin-top:  5px;
  margin-left: -4px;
}

.error-message {
  margin-bottom: 25px;
}

.section-header {
  display:   flex;
  flex-wrap: wrap;
}

.section-header-title {
  font-weight: 600;
}

.error-wrapper {
  margin-bottom: $error-message-margin-bottom;
  white-space:   pre-wrap;
}

.form-group {
  margin-right: 50px;
}

select.form-control { //sass-lint:disable-line no-qualifying-elements
  width:        $input-length-for-rules;
}

input.form-control { //sass-lint:disable-line no-qualifying-elements
  width:        $input-length-for-rules;
}

.adjust-height {
  div:first-child {
    padding-top: 10px;
    height:      50px;
  }
}

.config-properties {
  margin-bottom: 20px;
}

.tips {
  background: $white;
  padding:    20px;
}

.webhook-suggestions {
  max-width: 750px;
  margin-bottom: 1em;

  .btw {
    font-weight: 400;
    font-size: 14px;
    font-style: italic;
    color: lighten($text-color, 25%);
  }

  .ref {
    font-style: italic;
  }

  .footnote {
    font-style: italic;
    padding: 0;
    margin: 0.5em 0;
  }

  .footnote .sigil, .ref {
    color: $go-danger;
    font-weight: bold;
    font-size: 12px;
  }
}
